<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8" />
  <title>HI</title>


  <link rel="stylesheet" type="text/css" href="../css/todo.css">
  <script src="../js/vue.js"></script>


</head>

<body>

  <h1>vue</h1>




  <div id="app">
    <h2>Todos:</h2>
    <ol>
      <li v-for="todo in todos">
        <label>
          <input type="checkbox" v-on:change="toggle(todo)" v-bind:checked="todo.done">

          <del v-if="todo.done">
            {{ todo.text }}
          </del>
          <span v-else>
            {{ todo.text }}
          </span>
        </label>
      </li>
    </ol>
  </div>



  <div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>now: "{{ now }}"</p>
    <p>now method: "{{ mnow() }}"</p>
  </div>

  <div id="no-key-example" class="demo">
    <div>
      <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username">
      </template>
      <template v-else="">
        <label>Email</label>
        <input placeholder="Enter your email address">
      </template>
    </div>
    <button v-on:click="toggleLoginType">Toggle login type</button>
  </div>

<br>

  <div id="todo-list-example" class="demo">
    <form v-on:submit.prevent="addNewTodo">
      <label for="new-todo">Add a todo</label>
      <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat">
      <button>Add</button>
    </form>
    <ul>
      <li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)"></li>
    </ul>
  </div>





  <div id="blog-posts-events-demo" class="demo">
    <div :style="{ fontSize: postFontSize + 'em' }">
      <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" v-on:enlarge-text="onEnlargeText"></blog-post>
    </div>
  </div>






  <script src="../js/todo.js"></script>
</body>

</html>